<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
  <title>渠道注册</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="/bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="/dist/css/AdminLTE.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="/plugins/iCheck/square/blue.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
</head>
<body class="hold-transition login-page" style="height: auto;background: linear-gradient(to right, #50a3a2 0%, #53e3a6 100%);">
<div class="login-box" style="margin-top: 10px;">
  <div class="login-logo">
    <h2>渠道注册</h2>
  </div>
  <!-- /.login-logo -->
  <div class="login-box-body" style="border-radius:5px">
    <form id="dataForm" method="post">
      <div class="form-group has-feedback">
        <input type="text" id="username" class="form-control" placeholder="请输入用户名">
        <span class="glyphicon glyphicon-user form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" id="password" class="form-control" placeholder="请输入密码">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" id="repassword" class="form-control" placeholder="请再次输入密码">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="text" id="qq" class="form-control" placeholder="请输入联系QQ">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="hidden" id="recommend" class="form-control">
      </div>
      <div class="form-group has-feedback">
        <select id="service" class="form-control"></select>
      </div>
      <div class="row" style="margin-bottom: 15px;">
        <div class="col-md-6">
          <input type="text" name="code" class="form-control" id="code" placeholder="请输入验证码">
        </div>
        <div class="col-md-6">
          <img id="vcode" src="/lmgame/user/getImage" alt="验证码" align="bottom" style="cursor:pointer;" title="看不清可单击图片刷新" onclick="this.src='/lmgame/user/getImage?d='+Math.random();" />
        </div>
      </div>
      <div class="row">
        <div class="col-md-6" style="margin-bottom: 15px;">
          <input type="text" name="phone" class="form-control" id="phone" placeholder="请输入手机号">
        </div>
        <div class="col-md-6" style="margin-bottom: 15px;">
          <input  class="btn btn-primary" type="button" class="btn" id="getcode" value="获取验证码" onclick="checkCode()">
        </div>
        <div class="col-md-6" style="margin-bottom: 15px;">
          <input type="text" name="messageCode" class="form-control" id="messageCode" placeholder="请输入短信验证码">
        </div>
      </div>
      <div class="form-group has-feedback">
        <button type="button" id="submitForm"  class="btn btn-primary btn-block btn-flat">注册</button>
      </div>
      <div>
        <label>
          <a href="login.html">&lt;&lt;登录 </a>
        </label>
      </div>
    </form>
    <!--<a href="#">I forgot my password</a><br>
    <a href="register.html" class="text-center">Register a new membership</a>-->
  </div>
  <!-- /.login-box-body -->
</div>
<!-- /.login-box -->

<!-- jQuery 3 -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="/plugins/iCheck/icheck.min.js"></script>
<script src="/plugins/iCheck/icheck.min.js"></script>
<script src="/dist/js/divfloat.js"></script>
<script src="/dist/js/store.min.js"></script>
<script src="/dist/js/store.min.js"></script>

<script>
    let vcode = false;
    $(function () {
        let recommend = getUrlParam("rid");
        if(recommend == null || recommend ===''){
            recommend = store.get("rid");
        }
        if(recommend !== '' && recommend != null) {
            $("#recommend").val(recommend);
        }
        loadService();
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' /* optional */
        });

        $("#submitForm").click(function () {
            //$("#submitForm").attr("disabled","disabled");

            let username = $.trim($("#username").val());
            if(username == ''|| username == null){
                divfloat("用户名不能为空",210,30);
                return;
            }
            let password = $("#password").val();
            if(password == ''|| password == null){
                divfloat("密码不能为空",210,30);
                return;
            }
            let repassword = $("#repassword").val();
            if(password !== repassword){
                divfloat("两次密码不一致",210,30);
                return;
            }
            if(!vcode){
                divfloat("图片验证失败",210,30);
                return;
            }


            let reg = /^[A-Za-z0-9]{6,20}$/;
            //let reg1 = /^[a-z]\w{6,20}$/;
            // let reg1 = /^[A-Za-z0-9]{4,20}$/;
            // if(!reg1.test(username)){
            //     divfloat("用户名不小于4位",210,30);
            //     return;
            // }

            if(!reg.test(password)){
                divfloat("密码不小于6位",210,30);
                return;
            }
            let phone = $("#phone").val();
            if(phone == ''|| phone == null){
                divfloat("手机号码不能为空",210,30);
                return;
            }
            let messageCode = $("#messageCode").val();
            if(messageCode == ''|| messageCode == null){
                divfloat("短信验证码不能为空",210,30);
                return;
            }
            let url="/lmgame/user/register";
            $.ajax({
                type : 'POST',
                url : url,
                data : {
                    "username":username,
                    "password":password,
                    "messageCode":messageCode,
                    "recommend": $("#recommend").val(),
                    "service": $("#service").val(),
                    "realname": $("#realname").val(),
                    "qq": $("#qq").val(),
                    "phone":phone
                },
                dataType : "json",
                success: function(data) {
                    if(data.code!=0){
                        divfloat(data.msg,210,30);
                        $("#submitForm").removeAttr("disabled");
                        $("#vcode").attr("src","/lmgame/user/getImage?d="+Math.random());
                        return;
                    }
                    window.location.href = "/index2.html";
                },
                error:function (data) {
                }
            });
        });
    });

    function checkCode() {
        let phone = $("#phone").val();
        if(phone == ''|| phone == null){
            divfloat("手机号码不能为空",210,30);
            return;
        }
        let code = $("#code").val();
        if(code == ''|| code == null){
            divfloat("验证码不能为空",210,30);
            return;
        }
        let url="/lmgame/user/checkCode";
        $.ajax({
            type : 'POST',
            url : url,
            data : {
                "code":code,
                "phone":phone
            },
            dataType : "json",
            success: function(data) {
                if(data.code!=0){
                    $("#vcode").attr("src","/lmgame/user/getImage?d="+Math.random());
                    divfloat(data.msg,210,30);
                    return;
                }
                let getcode = $("#getcode");
                getcode.attr("disabled","disabled");
                let time = 60;
                getcode.val("("+time+")秒后重新获取");
                setTimeout(function(){
                    getcode.css("opacity","0.8");
                },1000);
                let set=setInterval(function(){
                    getcode.val("("+--time+")秒后重新获取");
                }, 1000);
                setTimeout(function(){
                    getcode.attr("disabled",false).val("重新获取验证码");
                    clearInterval(set);
                }, 60000);
                vcode = true;
                $("#submitForm").removeAttr("disabled")
            },
            error:function (data) {
            }
        });
    }

    function loadService() {
        let url="/lmgame/user/loadService";
        $.ajax({
            type : 'POST',
            url : url,
            dataType : "json",
            success: function(data) {
                if(data.code === 0){
                    let html = "<option value=''>选择客服</option>";
                    data.data.forEach(function(key){
                        html+="<option value="+key.id+">"+key.username+"</option>";
                    });
                    $("#service").html(html);
                }
            },
            error:function (data) {
            }
        });
    }

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r!=null) return unescape(r[2]); return null; //返回参数值
    }
</script>
</body>
</html>
